{include file="public/nheader"}

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '775b21664ea3f9505e22fc3e7f81e416',
    }
</script>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=e39f8da70435148bc68377fe912b6e2a&plugin=AMap.PolygonEditor,AMap.GeoJSON,AMap.DistrictSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

<body>
    <div id="container"></div>
    <div class="info" id="text" style="top:1rem;left:1rem;width:5rem">
        点击获取坐标位置
    </div>
    <div id="myPageTop">
        <div class="input-item">
            <div class="input-item-prepend">
                <span class="input-item-text" style="width:8rem;">快速查找地区</span>
            </div>
            <input id='tipinput' type="text">
        </div>
    </div>
    <div class="input-card">
        <h4>下属行政区查询</h4>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
            <select id='province' style="width:100px" onchange='search(this)'></select>
        </div>

        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
            <select id='city' style="width:100px" onchange='search(this)'></select>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
            <select id='district' style="width:100px" onchange='search(this)'></select>
        </div>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">街道</span></div>
            <select id='street' style="width:100px" onchange='setCenter(this)'></select>
        </div>
    </div>
    {include file="public/nfooter"}
    <script type="text/javascript">
        var map, district, polygons = [], citycode, nowpolygons = [];
        var citySelect = document.getElementById('city');
        var districtSelect = document.getElementById('district');
        var areaSelect = document.getElementById('street');
        var map = new AMap.Map("container", {
            zoom: 18,
            viewMode: '3D',
        });
        //行政区划查询
        var opts = {
            subdistrict: 1,   //返回下一级行政区
            showbiz: false  //最后一级返回街道信息
        };
        district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
        district.search('中国', function (status, result) {
            if (status == 'complete') {
                getData(result.districtList[0]);
            }
        });
        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
            var auto = new AMap.AutoComplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            auto.on("select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
        });
        var path = <?= json_encode($arr, true) ?>;
        var polygon = [];
        for (var i = 0; i < path.length; i++) {
            var idata = new AMap.Polygon({
                path: path[i],
                strokeColor: "red",
                strokeWeight: 1,
                strokeOpacity: 0.6,
                fillOpacity: 0.6,
                fillColor: 'red',
                zIndex: 50,
                bubble: true,
            })
            polygon.push(idata);
        }
        map.add(polygon);

        // 缩放地图到合适的视野级别
        map.setFitView()
        map.on('click', showInfoClick);
        function showInfoClick(e) {
            var text = '坐标[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]'
            document.querySelector("#text").innerText = text;
        }
        function getData(data, level) {
            var bounds = data.boundaries;
            nowpolygons = [];
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    var polygona = new AMap.Polygon({
                        map: map,
                        strokeWeight: 1,
                        strokeColor: '#0091ea',
                        fillColor: '#80d8ff',
                        fillOpacity: 0.2,
                        path: bounds[i]
                    });
                    nowpolygons.push(polygona);
                    polygons.push(polygona);
                }
                map.setFitView();//地图自适应
            }
            //清空下一级别的下拉列表
            if (level === 'province') {
                citySelect.innerHTML = '';
                districtSelect.innerHTML = '';
                areaSelect.innerHTML = '';
            } else if (level === 'city') {
                districtSelect.innerHTML = '';
                areaSelect.innerHTML = '';
            } else if (level === 'district') {
                areaSelect.innerHTML = '';
            }

            var subList = data.districtList;
            if (subList) {
                var contentSub = new Option('--请选择--');
                var curlevel = subList[0].level;
                var curList = document.querySelector('#' + curlevel);
                curList.add(contentSub);
                for (var i = 0, l = subList.length; i < l; i++) {
                    var name = subList[i].name;
                    var levelSub = subList[i].level;
                    var cityCode = subList[i].citycode;
                    contentSub = new Option(name);
                    contentSub.setAttribute("value", levelSub);
                    contentSub.center = subList[i].center;
                    contentSub.adcode = subList[i].adcode;
                    curList.add(contentSub);
                }
            }

        }
        function search(obj) {
            //清除地图上所有覆盖物
            for (var i = 0, l = polygons.length; i < l; i++) {
                polygons[i].setMap(null);
            }
            var option = obj[obj.options.selectedIndex];
            var keyword = option.text; //关键字
            var adcode = option.adcode;
            district.setLevel(option.value); //行政区级别
            district.setExtensions('all');
            //行政区查询
            //按照adcode进行查询可以保证数据返回的唯一性
            district.search(adcode, function (status, result) {
                if (status === 'complete') {
                    getData(result.districtList[0], obj.id);
                }
            });
        }
        function setCenter(obj) {

            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: obj[obj.options.selectedIndex].center,
                anchor: 'bottom-center'
            });
            map.add(marker);
            map.setCenter(obj[obj.options.selectedIndex].center)
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

</body>

</html>